<template>
  <div class="shelvesTask">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span style="line-height: 36px;">上架任务</span>
      </div>
      <s-table
        :table="table"
        @http="tableWatch">
        <el-table-column
          fixed="right"
          align="center"
          slot="operation"
          class-name="operationMore"
          label="可用操作"
          width="120">
          <template slot-scope="s">
            <el-button type="info" size="mini" @click="dialogCreateOpen(s.row)">生成</el-button>
            <el-button type="info" size="mini" @click="dialogSearchOpen(s.row)" icon="search"></el-button>
          </template>
        </el-table-column>
        <!--
        <el-form-item slot="multiSelect" label="多选操作" prop="multiSelect" v-if="table.multiSelect">
          <el-row>
            <el-col :span="8">
              <el-button size="small" type="info" @click="dialogOpen('')">操作人员</el-button>
            </el-col>
          </el-row>
        </el-form-item>
        -->
        <el-form-item label="供应商" prop="gysid">
          <el-input type="text"
                    class="input"
                    v-model="autoVue_table_gysid"
                    placeholder="供应商" spellcheck="false" auto-capitalize="off" auto-complete="off"
                    auto-correct="off"></el-input>
        </el-form-item>
        <el-form-item label="ASN编号" prop="asnbh">
          <el-input type="text"
                    class="input"
                    v-model="autoVue_table_asnbh"
                    placeholder="ASN编号" spellcheck="false" auto-capitalize="off" auto-complete="off"
                    auto-correct="off"></el-input>
        </el-form-item>
        <el-form-item label="PO编号" prop="dycgdbh">
          <el-input type="text"
                    class="input"
                    v-model="autoVue_table_dycgdbh"
                    placeholder="关联PO编号" spellcheck="false" auto-capitalize="off" auto-complete="off"
                    auto-correct="off"></el-input>
        </el-form-item>
        <el-form-item label="创建时间" prop="cjsj">
          <el-date-picker
            v-model="autoVue_table_cjsj"
            type="daterange"
            placeholder="选择日期范围">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="收货时间" prop="shsj">
          <el-date-picker
            v-model="autoVue_table_shsj"
            type="daterange"
            placeholder="选择日期范围">
          </el-date-picker>
        </el-form-item>
      </s-table>
    </el-card>
    <s-dialog :dialog="dialogSearch" :close="dialogSearchInit">
      <p slot="title">{{dialogSearch.title}}任务详情</p>
      <s-table :table="tableSearch" ref="tableSearch"></s-table>
    </s-dialog>
    <s-dialog :dialog="dialogCreate" :close="dialogCreateInit">
      <p slot="title">{{dialogCreate.title}}上架任务</p>
      <s-form :form="formDialogCreate" ref="formDialogCreate">
        <el-row>
          <el-col :xs="24" :lg="{span: 11, offset: 0}" class="">
            <el-form-item prop="account" label="账户类型">
              <el-select v-model="formDialogCreate.account" placeholder="请选择">
                <el-option
                  v-for="item in SHELVESTASK.account"
                  :key="item.dictionaryid"
                  :label="item.value"
                  :value="item.dictionaryid">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :lg="{span: 11, offset: 1}" class="">
            <el-form-item prop="ryid" label="人员">
              <el-select v-model="formDialogCreate.ryid"
                         filterable
                         @change="dialogRemoteryid"
                         placeholder="请输入人员名称">
                <el-option
                  v-for="item in dialogCreate.wmsqualityinspectionlist"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </s-form>
      <el-button slot="footer" @click="dialogCreateSave">保存</el-button>
    </s-dialog>
  </div>
</template>
<script>
  import {AutoVue, AutoPromise} from '~/plugins/Tools';
  function __formCreate () {
    return {
      account: { value: '', rule: [ 'vNull__change' ] },
      ryid: { value: '', rule: [ 'vNull__change' ] },
    };
  }
  export default AutoVue({
    name: 'task_shelvesTask-FEcarWms',
    head: {
      'title': '上架任务管理',
      'meta': [
        { 'hid': 'description', 'name': 'description', 'content': '乐速科技平台 上架任务 查看上架任务信息' },
      ],
    },
    store: ['USER', 'SHELVESTASK', 'DICTIONARY_shelvesTask', 'SHELVESTASK', 'DICTIONARY_shelvestask'],
    data: {
      table: {
        column:
          [
            { label: '仓库',
              prop: 'ckmc',
              minWidth: '0px',
              cRemarks: '',
              search: false },
            { label: '货主',
              prop: 'hzmc',
              minWidth: '0px',
              cRemarks: '',
              search: false },
            { label: 'ASN编号',
              prop: 'asnbh',
              minWidth: '0px',
              cRemarks: '',
              search: true },
            { label: '质检状态',
              prop: 'show_zjzt',
              minWidth: '0px',
              cRemarks: '',
              search: true },
            { label: 'ASN类型',
              prop: 'show_asnlx',
              minWidth: '0px',
              cRemarks: '',
              search: false },
            { label: 'ASN状态',
              prop: 'show_asnzt',
              minWidth: '0px',
              cRemarks: '',
              search: false },
            { label: '优先级',
              prop: 'show_yxj',
              minWidth: '0px',
              cRemarks: '',
              search: false },
            { label: '预计到货时间',
              prop: 'yjdhsj',
              minWidth: '0px',
              formatter: (row, column) => {
                return this.a.methods.formatterTime(row[column.property || column], 6);
              },
              type: 'DateRange',
              cRemarks: '',
              search: false },
            { label: '创建时间',
              prop: 'cjsj',
              minWidth: '0px',
              cRemarks: '',
              formatter: (row, column) => {
                return this.a.methods.formatterTime(row[column.property || column], 6);
              },
              type: 'DateRange',
              search: true },
            { label: '审核状态',
              prop: 'show_show_shzt',
              minWidth: '0px',
              cRemarks: '0未审核 1已审核',
              search: false },
            { label: '关联PO编号',
              prop: 'dycgdbh',
              minWidth: '0px',
              cRemarks: '',
              search: true },
            { label: '制单人',
              prop: 'zdr',
              minWidth: '0px',
              cRemarks: '',
              search: false },
            { label: '审核人',
              prop: 'ddshr',
              minWidth: '0px',
              cRemarks: '',
              search: false },
            { label: '码盘状态',
              prop: 'show_show_mpzt',
              minWidth: '0px',
              cRemarks: '0.未码盘 1.码盘',
              search: false },
            { label: '收货时间',
              prop: 'shsj',
              minWidth: '0px',
              cRemarks: '',
              formatter: (row, column) => {
                return this.a.methods.formatterTime(row[column.property || column], 6);
              },
              type: 'DateRange',
              search: true },
            { label: '供应商',
              prop: 'gysid',
              minWidth: '0px',
              cRemarks: '',
              search: true },
          ],
        url: '/wmsshelves/list',
        key: 'id',
        tableColumn: 4,
        muti: false,
      },
      dialogCreate: {
        title: '生成',
        wmsqualityinspectionlist: '',
        row: {},
        ryid: '',
      },
      formDialogCreate: __formCreate(),
      tableSearch: {
        column:
          [
            { label: '托盘码',
              prop: 'lpn',
              minWidth: '0px',
              cRemarks: '',
              search: false },
            { label: '货品编号',
              prop: 'show_bh',
              minWidth: '0px',
              cRemarks: '',
              search: false },
            { label: '货品名称',
              prop: 'show_mc',
              minWidth: '0px',
              cRemarks: '',
              search: false },
            { label: '上架库位',
              prop: 'show_kwid',
              minWidth: '0px',
              cRemarks: '',
              search: false },
            { label: '批次号',
              prop: 'show_hppc',
              minWidth: '0px',
              cRemarks: '',
              search: false },
            { label: '生产日期',
              prop: 'show_scrq',
              minWidth: '0px',
              cRemarks: '',
              formatter: (row, column) => {
                return this.a.methods.formatterTime(row[column.property || column], 3);
              },
              type: 'DateRange',
              search: false },
            { label: '预期数',
              prop: 'yqsl',
              minWidth: '0px',
              cRemarks: '',
              search: false },
            { label: '收货数',
              prop: 'sl',
              minWidth: '0px',
              cRemarks: '',
              search: false },
            { label: '样品数量',
              prop: 'ypsl',
              minWidth: '0px',
              cRemarks: '',
              search: false },
            { label: '人员',
              prop: 'czr',
              minWidth: '0px',
              cRemarks: '',
              search: false },
            { label: '操作时间',
              prop: 'czsj',
              minWidth: '0px',
              cRemarks: '',
              formatter: (row, column) => {
                return this.a.methods.formatterTime(row[column.property || column], 6);
              },
              type: 'DateRange',
              search: false },
          ],
        url: '/wmsshelves/selectRw',
        option: {
          yqdhbdid: '',
        },
        tableColumn: 5,
      },
      dialogSearch: {
        title: '查看',
        size: 'large',
      },
    },
    transition: 'slide-fade',
    methods: {
      dialogCreateInit () {
        this.formDialogCreate = {
          ...this.formDialogCreate,
          ...this.ObjectClone(__formCreate()),
        };
        this.resetFields('formDialogCreate');
      },
      async dialogCreateOpen (row) {
        await AutoPromise([
          async () => {
            if (!this.DICTIONARY_shelvesTask) {
              await this.USE('DICTIONARY_shelvesTask');
            }
          },
        ]);
        this.dialogCreate.row = row;
        console.log('id:' + this.dialogCreate.row.id);
        this.dialogCreate.visible = true;
      },
      async dialogRemoteryid (id) {
        this.dialogCreate.wmsqualityinspectionlist.forEach(value => {
          if (id === value.id) {
            this.dialogCreate.row.userName = value.name;
          }
        });
      },
      dialogCreateSave () {
        if (this.formDialogCreate.account === '0') {
          this.VALIDATE('formDialogCreate', async option => {
            delete option.account;
            option.czrId = option.ryid;
            delete option.ryid;
            option.yqdhbdid = this.dialogCreate.row.yqdhbdid;
            let step = [];
            step.push(option);
            try {
              await this.post('/wmsshelves/addRW', step);
              this.dialogCreateInit();
              this.tableWatch('table');
              this.dialogCreate.visible = false;
            } catch (err) {
              console.log(err);
            }
          });
        } else {
          this.VALIDATE('formDialogCreate', async option => {
            delete option.account;
            option.czrId = option.ryid;
            delete option.ryid;
            option.yqdhbdid = this.dialogCreate.row.yqdhbdid;
            let step = [];
            step.push(option);
            try {
              await this.post('/wmsshelves/addRW', step);
              this.dialogCreateInit();
              this.tableWatch('table');
              this.dialogCreate.visible = false;
            } catch (err) {
              console.log(err);
            }
          });
        }
      },
      dialogSearchInit () {
      },
      dialogSearchOpen (row) {
        if (this.dialogSearch.title === '查看') {
          this.tableSearch.option.yqdhbdid = row.yqdhbdid;
          this.tableSearch.url = '/wmsshelves/selectRw';
          this.tableWatch('tableSearch');
          this.dialogSearch.visible = true;
        }
      },
    },
    watch: {
      'formDialogCreate.account': async function (account) {
        this.formDialogCreate.ryid = '';
        if (account.length !== 0 && account === '0') {
          this.dialogCreate.wmsqualityinspectionlist = await this.post('/wmsqualityinspectionlist/selectYh', {});
        }
        if (account.length !== 0 && account === '1') {
          let {contentList} = await this.post('/wmsqualityinspectionlist/selectPDADLByHz', {
          });
          this.dialogCreate.wmsqualityinspectionlist = contentList;
        }
      },
    },
    mounted: function () {
      this.tableWatch('table');
    },
  });
</script>
<style scoped lang="scss">
  .box-card {
    margin: 20px;
  }

  .createTimeSpan {
    display: block;
    margin-top: 34px;
  }

  @media screen and (max-width: 800px) {
    .createTimeSpan {
      margin-top: 0;
    }
    .box-card {
      margin: 0;
    }
  }

  .el-select {
    width: 100%;
  }
</style>

<style lang="scss">

</style>
